<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <a-form size="small" :model="pageData" layout="inline">
          <!-- <a-form-item label="模板类型">
                        <a-select popup-container="html"  :style="{ width: '200px' }" class="bacClass" v-model="dropDownData">
                            <a-option :value="1">日保养</a-option>
                            <a-option :value="2">周保养</a-option>
                            <a-option :value="3">月保养</a-option>
                        </a-select>
                    </a-form-item> -->
          <a-form-item label="模板名称">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="dropDownData2"
              @press-enter="huiche" />
          </a-form-item>
        </a-form>
        <div>
          <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="deleteHandler" @select="selectHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" default-active-key="1">
                <a-tab-pane key="1" title="维修单列表"> -->
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height: calc(100% - 45px)"
        :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1">
      </AgGridVuesCopys>
      <paginationCopys :total="fySelet.total" show-total show-jumper show-page-size @change="PageSize"
      @page-size-change="change" style="justify-content: center" :page-size="fySelet.size" :current="fySelet.page"/>
      <!-- </a-tab-pane>
            </a-tabs> -->
    </template>

    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
      :width="400" :ok-loading="pageData.pageLoading" :visible="showAdd" unmountOnClose @ok="addOk"
      @cancel="showAdd = false">
      <template #title>
        {{ sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="dataForm">
          <a-form-item label-col-flex="120px" label="保养类型名称" field="templateType"
            :rules="[{ required: true, message: '保养类型必填' }]" :validate-trigger="['change', 'blur']">
            <a-select popup-container="html"  :style="{ width: '250px' }" class="bacClass" v-model="dataForm.templateType" @click="byTypeClick"
              allow-clear allow-search>
              <a-option v-for="item in byTypeList" :value="item.id + '-' + item.upkeepType">{{
                item.upkeepType
              }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="120px" label="保养模板名称" field="templateName"
            :rules="[{ required: true, message: '保养名称必填' }]" :validate-trigger="['change', 'blur']">
            <a-input allow-clear :style="{ width: '250px' }" class="bacClass" placeholder=""
              v-model="dataForm.templateName" />
          </a-form-item>
          <a-form-item label="保养项目明细" field="upkeepName" label-col-flex="120px"
            :rules="[{ required: true, message: '项目明细必填' }]" :validate-trigger="['change', 'blur']">
            <a-select popup-container="html"  class="bacClass" :default-value="dataForm.upkeepName" :style="{ width: '250px' }" multiple
              v-model="dataForm.upkeepName" allow-clear allow-search @click="byClick">
              <a-option v-for="item in byList">{{ item }}</a-option>
            </a-select>
          </a-form-item>
          <!-- <a-form-item label="提交状态" field="submit" label-col-flex="80px"
                        :rules="[{ required: true, message: '是否提交必填' }]" :validate-trigger="['change', 'blur']">
                        <a-select popup-container="html"  :style="{ width: '250px' }" class="bacClass" v-model="dataForm.submit">
                            <a-option :value="1">提交</a-option>
                            <a-option :value="0">不提交</a-option>
                        </a-select>
                    </a-form-item> -->
          <a-form-item label-col-flex="120px" label="备注">
            <a-textarea class="bacClass" placeholder="" v-model="dataForm.remark" :max-length="400" allow-clear
              show-word-limit />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script setup lang="ts">
import { post, get } from '@/api/http'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'

import { Message, Modal } from '@arco-design/web-vue'
import { baseURL } from '@/api/axios.config'
import { localeText } from '@/api/aggridZw'
const localeText1: any = ref(localeText)

const headerShow = ref(true)

const pageData: any = reactive({
  dropDownData: '',
  dropDownData2: '',
  showAdd: false,
  sideTitle: '',
})

const { dropDownData, dropDownData2, showAdd, sideTitle } = toRefs(pageData)

const dataForm: any = reactive({
  templateType: null,
  templateTypeId: null,
  templateTypeName: null,
  templateName: '',
  remark: '',
  upkeepName: [],
  // submit: null
})

function selectList() {
  post({
    url: 'zcTemRepair/upkeepTemplate/findUpkeepTemplate',
    data: {
      page: fySelet.page,
      limit: fySelet.size,
      templateName: pageData.dropDownData2,
      // "templateType": pageData.dropDownData2,
    },
  }).then((res: any) => {
    gridOption.value.setRowData(res.data.list)
    fySelet.total = res.data.total
  })
}

const huiche = () => { }

const selectHandler = () => {
  selectList()
}

const options: any = ref([])
const options2: any = ref([])

const addHandler = () => {
  for (let i in dataForm) {
    dataForm[i] = ''
  }
  pageData.sideTitle = '新增保养项目模板'
  pageData.showAdd = true
}

const deleteHandler = () => {
  if (gridOption.value.getSelectedRows().length === 0) {
    return false
  }
  Modal.confirm({
    title: '系统提示',
    content: '确认删除选中的数据?',
    onOk() {
      post({
        url: 'zcTemRepair/upkeepTemplate/deleteUpkeepTemplate',
        data: gridOption.value.getSelectedRows().map((o: any) => {
          return o.id
        }),
      }).then(({ code, data }: any) => {
        if (code === 200) {
          Message.success({
            content: '删除成功',
            duration: 5000,
          })
          fySelet.page = 1
          selectList()
        } else {
          Message.error({
            content: '删除失败',
            duration: 5000,
          })
        }
      })
    },
  })
}

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  flex: 1,
}

const fySelet: any = reactive({
  total: 10,
  size: 10,
  page: 1,
})

const PageSize = (val: any) => {
  fySelet.page = val
  selectList()
}

const change = (val: any) => {
  fySelet.size = val
  selectList()
}

const tc = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
  // {
  //     headerName: '序号',
  //     field: 'num',
  //     // pinned: o['fixed'],
  //     width: 150
  // },
  {
    headerName: '保养类型名称',
    field: 'templateTypeName',
    width: 150,
  },
  {
    headerName: '保养模板名称',
    field: 'templateName',
    width: 150,
  },
  {
    headerName: '保养项目明细',
    field: 'upkeepName',
    width: 150,
  },
  {
    headerName: '备注',
    field: 'remark',
    width: 150,
  },
  {
    headerName: '创建人',
    field: 'createName',
    width: 150,
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    width: 150,
  },
  {
    headerName: '最后修改人',
    field: 'updateName',
    width: 150,
  },
  {
    headerName: '最后修改时间',
    field: 'updateTime',
    width: 150,
  },
  // {
  //     headerName: '提交状态',
  //     field: 'submit',
  //     pinned: 'right',
  //     width: 120,
  //     cellRenderer: {
  //         template: `
  //         <a-space>
  //             <el-tag type="success" v-if="submitState == 0">未提交</el-tag>
  //             <el-tag type="warning"  v-if="submitState == 1">已提交</el-tag>
  //         </a-space>
  //         `,
  //         setup(props: any) {
  //             return {
  //                 submitState: props.params.data.submit,
  //             }
  //         }
  //     }
  // },
  {
    headerName: '操作',
    field: 'slot',
    pinned: 'right',
    width: 120,
    cellRenderer: {
      template: `
            <a-space>
                <a-tag class="tagCss" @click="a">修 改</a-tag>
            </a-space>
            `,
      setup(props: any) {
        const a = () => {
          updateList(props.params.data) // props.params.data
        }
        return {
          a,
        }
      },
    },
  },
]

const formRef: any = ref()

const addOk = () => {
  if (pageData.sideTitle == '新增保养项目模板') {
    formRef.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'zcTemRepair/upkeepTemplate/saveUpkeepTemplate',
          data: {
            templateTypeId: Number(dataForm.templateType.split('-')[0]),
            templateName: dataForm.templateName,
            remark: dataForm.remark,
            // "submit": dataForm.submit,
            templateTypeName: dataForm.templateType.split('-')[1],
            upkeepName: dataForm.upkeepName,
          },
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            selectList()
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  } else {
    formRef.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'zcTemRepair/upkeepTemplate/updateUpkeepTemplate',
          data: {
            id: dataForm.id,
            templateTypeId: Number(dataForm.templateType.split('-')[0]),
            templateName: dataForm.templateName,
            remark: dataForm.remark,
            // "submit": dataForm.submit,
            templateTypeName: dataForm.templateType.split('-')[1],
            upkeepName: dataForm.upkeepName,
          },
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            selectList()
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  }
}

const updateList = (e: any) => {
  for (let i in e) {
    dataForm[i] = e[i]
  }
  byTypeClick()
  dataForm.templateType = dataForm.templateTypeId + '-' + dataForm.templateTypeName
  pageData.sideTitle = '修改保养项目模板'
  pageData.showAdd = true
}

const byList = ref([])

const byClick = () => {
  get({
    url: 'zcTemRepair/upkeep/selectUpkeep',
  }).then((res: any) => {
    if (res.code == 200) {
      byList.value = res.data.list.map((e: any) => e.upkeepName)
    } else {
      Message.error(res.message)
    }
  })
}
const byTypeList: any = ref([])

const byTypeClick = () => {
  post({
    url: 'zcTemRepair/upkeepType/selectUpkeepType',
  }).then((res: any) => {
    if (res.code == 200) {
      byTypeList.value = res.data.list
    } else {
      Message.error(res.message)
    }
  })
}
</script>
<style scoped lang="less">
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>
